<template>
  <div class="dispatch-detail">
    <el-row type="flex" justify="space-between" class="tool-box" align="middle">
      <el-col>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/DispatchScheduling' }"
            >排班管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>排班详情</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-button size="small" @click="$router.push('/DispatchScheduling')"
        >返回<i class="el-icon-arrow-right"
      /></el-button>
    </el-row>
    <div class="main">
      <div class="top">
        <el-button size="mini">编辑</el-button>
        <h3>细纱</h3>
        <el-row>
          <el-col :span="6">排班编号：S123456</el-col>
          <el-col :span="6">车间：一纺</el-col>
          <el-col :span="6">工种：挡车工</el-col>
          <el-col :span="6"
            >班次：<el-tag size="mini" class="table-tag">甲班</el-tag></el-col
          >
        </el-row>
      </div>
      <el-descriptions
        class="middle"
        :column="4"
        size="medium"
        :labelStyle="{ color: '#999' }"
        :contentStyle="{ color: '#182236' }"
      >
        <el-descriptions-item label="日期">kooriookami</el-descriptions-item>
        <el-descriptions-item label="时间">kooriookami</el-descriptions-item>
        <el-descriptions-item label="班长">kooriookami</el-descriptions-item>
        <el-descriptions-item label="班教">kooriookami</el-descriptions-item>
      </el-descriptions>
      <el-tabs class="bottom" v-model="activeName">
        <el-tab-pane name="1" label="班次人员">
          <div class="remind">
            共<span>30</span>人，到岗<span>15</span>人，已请假<span
              style="color:#fe3d3d"
              >1</span
            >人
          </div>
          <div>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-circle-plus-outline"
              >添加人员</el-button
            >
            <el-button size="small">调整班次</el-button>
            <el-button size="small" type="danger" class="danger-btn"
              >移出人员</el-button
            >
            <el-button type="text">导出排班表</el-button>
          </div>
          <div class="common-table">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column
                prop="pbbh"
                label="姓名"
                min-width="10%"
                align="center"
              />
              <el-table-column
                prop="pbbh"
                label="工号"
                min-width="10%"
                align="center"
              />
              <el-table-column
                prop="pbbh"
                label="工种"
                min-width="10%"
                align="center"
              />
              <el-table-column
                prop="pbbh"
                label="设备名称"
                min-width="10%"
                align="center"
              />
              <el-table-column
                prop="pbbh"
                label="设备台数"
                min-width="10%"
                align="center"
              />
              <el-table-column
                prop="pbbh"
                label="设备台号"
                min-width="10%"
                align="center"
              />
              <el-table-column
                prop="dcg"
                label="操作"
                width="220"
                align="center"
              >
                <div class="table-btn" slot-scope="{ row }">
                  <el-button type="text">调至其他班次</el-button>
                  <el-divider direction="vertical"></el-divider>
                  <el-button type="text">移出</el-button>
                  <el-divider direction="vertical"></el-divider>
                  <el-button type="text">请假</el-button>
                </div></el-table-column
              >
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane name="2" label="操作记录"> </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: '1',
      tableData: [{ ddbh: 1 }]
    };
  }
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
}
.top {
  height: 82px;
  padding: 15px 30px;
  box-sizing: border-box;
  background: rgb(44, 103, 246);
  position: relative;
  color: #fff;
  .el-button {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    border-color: #fff;
    background: transparent;
  }
  h3 {
    font-size: 18px;
    margin: 0 auto 10px;
  }
  .table-tag {
    line-height: 20px;
  }
}
.middle {
  padding: 8px 30px 0 30px;
  height: 35px;
  line-height: 35px;
}
.bottom {
  padding: 0 20px 10px 20px;
  overflow-y: auto;
  flex-grow: 1;
  border-top: 10px solid #f6f9fc;
}
.table-btn .el-button,
.table-btn .el-button--text:hover,
.table-btn .el-button--text:focus {
  color: #ff7819;
  padding: 0;
}
</style>
